<!DOCTYPE HTML>
<html>
<head>
  <style>
    body {
      margin: 0;
      padding: 0;
    }
    .generateVideo {
      float: left;
      margin-right: 0px;
      margin-left: 0px;
      display: block !important;
    }
  </style>

  <script>
    // 默认每排3个视频
    const videoCount = 3;
    function watchWindowSize() {
      // 当窗口大小发生改变时，会重置video的大小
      const w1 = Math.floor(document.documentElement.clientWidth / videoCount);
      const h1 = Math.floor(document.documentElement.clientHeight / videoCount);
      for (let ele of document.getElementsByClassName("generateVideo")) {
        ele.style.width = `${w1}px`;
        ele.style.height = `${h1}px`;
      }
    };
    window.addEventListener("resize", watchWindowSize);
  </script>

</head>

<body style="width: 100%;height: 100%;">

</body>

<script>
  const videoTags = localStorage.getItem('videos')
  const w = document.documentElement.clientWidth;
  const h = document.documentElement.clientHeight;
  const correctTags = videoTags.replace(/width: /g, `width: ${Math.floor(w / videoCount)}`).replace(/height: /g, `height: ${Math.floor(h / videoCount)}`);
  document.body.innerHTML = correctTags;
</script>

</html>
